<template>
  <Dialog
    class="edit-dialog"
    title="图片观看"
    :visible.sync="dialogVisible"
    @submit="submit"
    :footer="true"
  >
    <el-carousel v-if="dataList.length != 0">
      <el-carousel-item v-for="item in dataList" :key="item.uuid">
        <el-image
          style="width: 100%; height: 100%"
          :src="item.filePath"
          fit="scale-down"
        ></el-image>
      </el-carousel-item>
    </el-carousel>

    <div v-else style="text-align: center">
      图片不存在
    </div>

    <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
    </span>
  </Dialog>
</template>

<script>
import { getFileList } from "@/api/upload";

export default {
  name: "PictureView",
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    roleInfo: {
      type: Object,
      default: {}
    }
  },
  data() {
    return {
      //对话框状态--------------------------------------------
      dialogVisible: this.visible,
      dataList: []
    };
  },

  watch: {
    //监听对话框状态--------------------------------------------
    dialogVisible(newVal) {
      this.$emit("update:visible", newVal);
    }
  },

  created() {
    this.getFileList();
  },

  methods: {
    async getFileList() {
      const params = {
        page: 0,
        pageSize: 0,
        typeName: "OPTION_PIC",
        parentUuid: this.roleInfo.uuid
      };
      let res = await getFileList(params).catch(err => console.log(err));
      if (!res) return;
      this.dataList = res.items;
    },
    //确定提交--------------------------------------------
    submit() {
      this.dialogVisible = false;
    }
  }
};
</script>

<style lang="scss" scoped>
.tree-transfer {
  min-width: 500px;
}
</style>
